<template>
  <div class="app-main-container">
    <div class="app-main-title">电子发票配置</div>

    <el-form
      ref="ruleForm"
      class="doumee-form"
      :model="param"
      :rules="rules"
      label-width="150px"
      label-suffix="："
    >
      <div class="property-title">发票参数</div>

      <el-form-item label="开票主体" prop="companyName">
        <el-input
          v-model="param.companyName"
          type="text"
          :disabled="param.id"
          placeholder="请输入开票主体"
          maxlength="20"
        />
      </el-form-item>
      <el-form-item label="纳税人识别号" prop="nsrsbh">
        <el-input
          v-model="param.nsrsbh"
          :disabled="param.id"
          type="text"
          placeholder="请输入纳税人识别号"
          maxlength="20"
        />
      </el-form-item>
      <el-form-item label="公司注册地址" prop="dzdh">
        <el-input
          v-model="param.dzdh"
          :disabled="param.id"
          type="text"
          placeholder="请输入公司注册地址"
          maxlength="20"
        />
      </el-form-item>
      <el-form-item label="开票人" prop="kpKpr">
        <el-input
          v-model="param.kpKpr"
          :disabled="param.id"
          type="text"
          placeholder="请输入开票人"
          maxlength="20"
        />
      </el-form-item>
      <el-form-item label="营业执照" prop="ossUrl">
        <transition name="fade">
          <Cropper
            v-if="dialogCropperVisible"
            :option-img="optionImg"
            :fileinfo="fileinfo"
            use-type="INVOICE_IMG"
            :fixed-number="[32, 32]"
            @formSubmit="cropperSubmit"
            @formClose="cropperClose"
          />
        </transition>
        <el-upload
          class="device-uploader"
          :disabled="param.id"
          :action="uploadFileUrl"
          :data="uploadData"
          :show-file-list="false"
          accept=".pdf,.jpg,.png"
          :auto-upload="false"
          :on-change="addFileChange"
        >
          <i class="el-icon-plus uploader-icon" />
          <div
            v-show="param.ossUrl"
            class="file"
            :style="'background-image: url(' + param.ossUrl + ')'"
          >
            <div v-if="!param.id" class="delete">
              <i class="el-icon-delete icon" @click.stop="deleteYyzzImage" />
            </div>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="复核人" prop="kpFhr">
        <el-input
          v-model="param.kpFhr"
          :disabled="param.id"
          type="text"
          placeholder="请输入复核人"
          maxlength="20"
        />
      </el-form-item>
      <el-form-item label="邮箱地址" prop="contact_email">
        <el-input
          v-model="param.contact_email"
          type="text"
          :disabled="param.id"
          placeholder="请输入邮箱地址"
          maxlength="20"
        />
      </el-form-item>
      <el-form-item label="开户行名称" prop="khhZh">
        <el-input
          v-model="param.khhZh"
          :disabled="param.id"
          type="text"
          placeholder="请输入开户行名称"
          maxlength="20"
        />
      </el-form-item>
      <el-form-item label="收款人" prop="kpSkr">
        <el-input
          v-model="param.kpSkr"
          :disabled="param.id"
          type="text"
          placeholder="请输入收款人"
          maxlength="20"
        />
      </el-form-item>
      <el-form-item label="是否审批" prop="checkFlag">
        <el-radio-group v-model="param.checkFlag" :disabled="param.id">
          <el-radio label="0">直接开票</el-radio>
          <el-radio label="1">审批开票</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="line-style" />
      <div class="property-title">硬件信息</div>
      <el-form-item label="硬件设备号" prop="sbbh">
        <el-input
          v-model="param.sbbh"
          :disabled="param.id"
          type="text"
          placeholder="请输入硬件设备号"
          maxlength="20"
        />
      </el-form-item>
      <el-form-item label="Ukey口令" prop="sbkl">
        <el-input
          v-model="param.sbkl"
          :disabled="param.id"
          type="text"
          placeholder="请输入Ukey口令"
          maxlength="20"
        />
      </el-form-item>
      <el-form-item label="Ukey证书口令" prop="sbzskl">
        <el-input
          v-model="param.sbzskl"
          :disabled="param.id"
          type="text"
          placeholder="请输入Ukey证书口令"
          maxlength="20"
        />
      </el-form-item>
      <el-form-item v-if="!param.id">
        <el-button
          v-preventReClick
          type="primary"
          @click="onSubmit()"
        >提交</el-button>
      </el-form-item></el-form>
  </div>
</template>

<script>
import {
  uploadFile,
  merchantEntry,
  merchantInvoiceInfo
} from '@/api'
import Cropper from '@/components/cropper'
export default {
  components: {
    Cropper
  },
  data() {
    return {
      subLoading: false,
      optionImg: '',
      fileinfo: {},
      dialogCropperVisible: false,
      loding: false,
      time: 60,
      meta: [],
      uploadFileUrl: uploadFile,
      disabled: false,
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
          )
        }
      },
      uploadData: {
        folder: 'INVOICE_IMG',
        type: ''
      },
      venueId: sessionStorage.getItem('venueId'),
      param: {},
      rules: {
        companyName: [{ required: true, message: '请输入开票主体', trigger: 'blur' }],
        nsrsbh: [{ required: true, message: '请输入纳税人识别号', trigger: 'blur' }],
        dzdh: [{ required: true, message: '请输入公司注册地址', trigger: 'blur' }],
        kpKpr: [{ required: true, message: '请输入开票人 ', trigger: 'blur' }],
        ossUrl: [
          { required: true, message: '请上传营业执照', trigger: 'change' }
        ],
        kpFhr: [{ required: true, message: '请输入复核人', trigger: 'blur' }],
        contact_email: [{ required: true, message: '请输入邮箱地址', trigger: 'blur' }],
        khhZh: [{ required: true, message: '请输入开户行名称', trigger: 'blur' }],
        kpSkr: [{ required: true, message: '请输入收款人', trigger: 'blur' }],
        sbbh: [{ required: true, message: '请输入硬件设备号', trigger: 'blur' }],
        sbkl: [{ required: true, message: '请输入Ukey口令', trigger: 'blur' }],
        sbzskl: [{ required: true, message: '请输入Ukey证书口令', trigger: 'blur' }],
        checkFlag: [{ required: true, message: '请选择是否审批 ', trigger: 'change' }]
      }
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getDetail()
  },
  methods: {
    // 上传营业执照成功
    yyzzUploadSuccess(res, file, fileList) {
      if (res.success) {
        this.$set(this.param, 'ossUrl', res.showUrl)
        this.$set(this.param, 'yyzz', res.insertUrl)
        this.$refs.ruleForm.clearValidate()
      } else {
        this.$message.error(res.msg || '上传失败')
      }
    },
    // 裁剪确定按钮
    cropperSubmit(config) {
      // preImg 完整路径  urlPre 不包含域名
      if (config.success) {
        this.$set(this.param, 'ossUrl', config.showUrl)
        this.$set(this.param, 'yyzz', config.insertUrl)
        this.dialogCropperVisible = false
        this.$refs.ruleForm.clearValidate()
      } else {
        this.$message.error(config.msg || '上传失败')
        this.$refs.ruleForm.clearValidate()
        this.dialogCropperVisible = false
      }
    },
    // 裁剪取消
    cropperClose() {
      this.dialogCropperVisible = false
    },
    async addFileChange(file, fileList) {
      // 上传，拿到file文件
      // this.files = file.raw;
      this.$nextTick(() => {
        this.optionImg = URL.createObjectURL(file.raw)
        this.fileinfo = file.raw
        this.dialogCropperVisible = true
      })
    },
    // 删除已上传营业执照
    deleteYyzzImage() {
      this.$set(this.param, 'ossUrl', '')
      this.$set(this.param, 'yyzz', '')
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.param.venueId = this.venueId
          const param = { ...this.param }
          param.url = param.yyzz
          param.fullUrl = param.ossUrl
          param.contactEmail = param.contact_email
          this.subLoading = true
          merchantEntry({
            param
          })
            .then((res) => {
              this.subLoading = false
              if (res.errorCode === '000000') {
                this.$message.success('提交成功')
                this.getDetail()
              }
            })
            .catch((err) => {
              this.subLoading = false
              console.log(err)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getDetail() {
      merchantInvoiceInfo({ param: {}})
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.param = res.record
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.code-style {
  width: 70%;
}
.code-btn-style {
  margin-left: 20px;
}
.device-uploader {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}
.line-style {
  margin-bottom: 20px;
}
.device-uploaders {
  ::v-deep .el-upload-list__item {
    width: 80px;
    height: 80px;
  }
  ::v-deep .el-upload {
    width: 80px;
    height: 80px;
    line-height: 80px;
  }
}

</style>
